<template>
    <div class="actcenter-wrap">
        <div class="activityEnd">
            <!--<img src="http://img.uuuda.com/recruiting/hdyjs.png"/>-->

        </div>
        <!--<div class="actcenter-slider">-->
            <!--<ul class="actcenter-slider-ul" ref="con1" :class="{anim:animate==true}">-->
                <!--<li v-for='item in result.history'><img src=""/>{{item.date}} {{item.nickname}}获得奖励{{parseFloat(item.amount)}}元</li>-->
            <!--</ul>-->
        <!--</div>-->
       <!--<p class="actcenter-tip">小U送福利，千元大奖等你拿，每日多赚20元</p>-->
       <!--<div class="actcenter-reward">-->
           <!--<div class="actcenter-canvas">-->
               <!--<canvas id="canvas"></canvas>-->
               <!--<p class="actcenter-text1">奖金池</p>-->
           <!--</div>-->
           <!--<div class="actcenter-num">-->
               <!--<div class="actcenter-n">-->
                    <!--<p class="actcenter-total">{{result.left|cash}}元</p>-->
                    <!--<p class="actcenter-text2">（奖金剩余）</p>-->
               <!--</div>-->
               <!--<div class="actcenter-n">-->
                    <!--<p class="actcenter-total">{{result.total|cash}}元</p>-->
                    <!--<p class="actcenter-text2">（总奖金）</p>-->
               <!--</div>-->
               <!--<p class="actcenter-tips">余额每天11点更新</p>-->
           <!--</div>-->
       <!--</div>-->
       <!---->
       <!--<div class="actcenter-total1">-->
            <!--<div class="actcenter-total-top">-->
                <!--<div class="actcenter-total-top-cell">已领取：{{result.userSum}}元</div>-->
                <!--<div class="actcenter-total-top-cell">-->

                        <!--<span>待领取：{{result.userSumNeedShare}}元</span>-->
                        <!--<div class="actcenter-shareget"  v-if="result.userSumNeedShare > 0" @click="showShare">-->
                            <!--分享领取-->
                        <!--</div>-->

                <!--</div>-->
            <!--</div>-->
            <!--<p>今日已完成{{result.orderNum}}单</p>-->
            <!--<p>{{result.message}}</p>-->
            <!--<div class="actcenter-btn" @click="goOwner">去发行程</div>-->
        <!--</div>-->
        <!--<div class="actcenter-rule">-->
            <!--<div class="actcenter-list-title">-->
                <!--<p class="actcenter-list-title-text">活动规则</p>-->
                <!--<div class="actcenter-list-title-line"></div>-->
            <!--</div>-->
            <!--<p class="actcenter-rule-text">-->
                <!--1.自活动开始起用户每日完成1-3单，每单奖励1元，完成4-6单，每单奖励1.2元，完成7-8单，每单奖励1.3元，完成9单及以上获得最高奖励13元<br>-->
                <!--2.每日奖励于次日中午11点发放，车主分享后获得奖励，奖励到账后车主方可提现，提现审核期为24小时  <br>-->
                <!--3.本次活动最终解释权归U搭拼车所有，如发现任何违规套取奖励的行为，平台有权扣除所得，并对情节严重者进行封号，或追究法律责任<br>-->

            <!--</p>-->
        <!--</div>-->
        <!--<yd-popup v-model="showSharePop" position="center" width="80%" :close-on-masker="false" >-->
            <!--<div class="actcenter-pop">-->
                <!--<div class="actcenter-pop-close" @click="showSharePop=false"></div>-->
                <!--<div class="actcenter-pop-top"></div>-->
                <!--<p class="actcenter-top-p">昨日完成<span>{{result.userSumLastDay}}</span>单，待领取奖励<span>{{result.userSumNeedShare}}</span>元，分享后可领取</p>-->
                <!--<div class="actcenter-btn actcenter-btn-top" @click="goShare">分享领取</div>-->
            <!--</div>-->
        <!--</yd-popup>-->
        <!--<yd-popup v-model="showPop" class="share-top" position="center" width="100%" >-->
            <!--<div style="height :100%">-->
                <!--<img class="actcenter-shareimg" src="http://img.uuuda.com/wxapp/live_weixin.png" alt="">-->
            <!--</div>-->
            <!---->
        <!--</yd-popup>-->
        <!--&lt;!&ndash;福利更新提示遮罩&ndash;&gt;-->
        <!--<div  class="actcenter-mask"  v-if="showActcenterTip">-->
            <!--<div class="actcenter-tip-img actcenter-img1"  v-if="actcenterTipImg">-->
                <!--<div class="actcenter-tip-btn" @click="actcenterTip(1)"></div>-->
            <!--</div>-->
            <!--<div class="actcenter-tip-img actcenter-img2" v-if="!actcenterTipImg">-->
                <!--<div class="actcenter-tip-btn" @click="actcenterTip(2)" ></div>-->
            <!--</div>-->

        <!--</div>-->
    </div>
</template>

<script>
let axios = require("axios");
export default {
  data() {
    return {
        animate:false,
        showSharePop: false,
        showPop: false,
        showActcenterTip:false,//是否显示福利更新提示
        actcenterTipImg:true,
        result: {history:[],left:0,message:'',orderNum: 0,total:0,userSum:0,userSumLastDay:0},
    };
  },
  filters:{
    cash:function(value){
        value +='';
        return value.replace(/(?!^)(?=(\d{3})+$)/g, ',')
    }
  },
  created() {
    // let token = this.$route.params.token;
    // this.token = token;
    // setInterval(this.scroll,3000)
    // this.datDetail();
    // if(localStorage.getItem('showActcenterTip')==1){ //判断福利更新提示是否点过 ，点过不显示
    //    this.showActcenterTip=false
    // }else {
    //     this.showActcenterTip=true
    // }
  },
  mounted(){

  },
  methods: {
      //福利更变提示
    actcenterTip(id){
        let self=this;
        if(id==1){
            self.actcenterTipImg=false;
        }else{
            //福利更新提示 出现过一次缓存值，下次不显示
            localStorage.setItem('showActcenterTip',1);
            self.showActcenterTip=false;//是否显示福利更新提示
        }

    },
    showShare(){
        this.showSharePop = true;
    },
    goShare(){
        let me = this;
        me.showSharePop = false;

        me.showPop = true;
        let query = this.$route.query;
        let token = query.u || '';
        axios({
            method: "get",
            url: "/api/reward/shared",
            params: {
                token: token
            }
        }).then(function(res) {
            let data = res.data;
            if(data.errno == 200){

            }
        });
        let shareText = ['日常拼车额外得现金奖励，一起来拿吧！','乘客多车主多，二百万现金等你拿！','我领取了U搭现金大奖，快来抢吧！'];
        axios({
            method: "get",
            url: "/api/reward/shareimg",
            params: {
                token: token
            }
        }).then(function(res) {
            let data = res.data;
            if(data.errno == 200){
                let img = data.data.url;
                wx.miniProgram.postMessage({
                    data: {
                        title: shareText[parseInt(Math.random()*3)],
                        imageUrl:img,
                        path:'/pages/index/index?path='+ encodeURIComponent('/pages/actcenter/actcenter')
                    }
                });

            }
        });
    },
    scroll(){
       this.animate=true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
       let items = this.result.history;
       setTimeout(()=>{      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
            items.push(items[0]);  // 将数组的第一个元素添加到数组的
            items.shift();               //删除数组的第一个元素
            this.animate=false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
       },500)
    },
    goOwner(){
        wx.miniProgram.switchTab({
            url: '/pages/owner/owner'
        });
    },
    datDetail() {
      let me = this;
      let query = this.$route.query;
      let token = query.u || '';
      axios({
        method: "get",
        url: "/api/reward/info",
        params: {
          token: token
        }
      }).then(function(res) {
        let data = res.data;
        if(data.errno == 200){
            me.result = data.data;
            me.initPage();
        }
      });
    },
    initPage(){
        var perc = (this.result.left/this.result.total)*100;
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var range = {value: perc}

        //range控件信息
        var rangeValue = range.value;
        var nowRange = perc;   //用于做一个临时的range

        //画布属性
        var mW = canvas.width = 160;
        var mH = canvas.height = 160;
        var lineWidth = 1;

        //圆属性
        var r = mH / 2; //圆心
        var cR = 80; //圆半径

        //Sin 曲线属性
        var sX = 0;
        var axisLength = mW; //轴长
        var waveWidth = 0.008 ;   //波浪宽度,数越小越宽
        var waveHeight = 3; //波浪高度,数越大越高
        var speed = 0.09; //波浪速度，数越大速度越快
        var xOffset = 0; //波浪x偏移量

        ctx.lineWidth = lineWidth;

        //画圈函数
        var IsdrawCircled = false;
        var drawCircle = function(){

            ctx.beginPath();
            ctx.strokeStyle = '#1080d0';
            ctx.arc(r, r, cR+1, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(r, r, cR, 0, 2 * Math.PI);
            ctx.clip();
            IsdrawCircled = true;
        }

        //画sin 曲线函数
        var drawSin = function(xOffset, color, waveHeight){
            ctx.save();

            var points=[];  //用于存放绘制Sin曲线的点

            ctx.beginPath();
            //在整个轴长上取点
            for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
                //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
                var y = Math.sin((-sX - x) * waveWidth + xOffset) * 0.8 + 0.1;

                var dY = mH * (1 - nowRange / 100 );

                points.push([x, dY + y * waveHeight]);
                ctx.lineTo(x, dY + y * waveHeight);
            }

            //封闭路径
            ctx.lineTo(axisLength, mH);
            ctx.lineTo(sX, mH);
            ctx.lineTo(points[0][0],points[0][1]);
            ctx.fillStyle = color;
            ctx.fill();

            ctx.restore();
        };

        var render = function(){
            ctx.clearRect(0, 0, mW, mH);

            rangeValue = range.value;

            if(IsdrawCircled == false){
                drawCircle();
            }

            if(nowRange <= rangeValue){
                var tmp = 1;
                nowRange += tmp;
            }

            if(nowRange > rangeValue){
                var tmp = 1;
                nowRange -= tmp;
            }

            drawSin(xOffset+Math.PI*0.7, 'rgba(255, 76, 106, 0.5)', 18);
            drawSin(xOffset, '#ff4c6a', 18);
            // drawText();

            xOffset += speed;
            requestAnimationFrame(render);
        }
        //写百分比文本函数
        var drawText = function(){
            ctx.save();

            var size = 0.4*cR;
            ctx.font = size + 'px Microsoft Yahei';
            ctx.textAlign = 'center';
            ctx.fillStyle = "#ff4c6a";
            ctx.fillText(~~nowRange + '%', r, r + size / 2);

            ctx.restore();
        };

        render();
    }
  }
};
</script>

<style>
    .actcenter-wrap{

    }
    .activityEnd{
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("http://img.uuuda.com/recruiting/hdyjs.png")no-repeat;
        background-size: 100% 100%;
    }
    .activityEnd img{

    }
    .actcenter-tip{
        color: #999;
        font-size: 14px;
        line-height: 22px;
        padding: 20px;
    }
    .actcenter-reward{
        margin: 0 20px;
        background-color: #fff;
        height: 250px;
        display: flex;
    }
    .actcenter-canvas{
        width: 160px;
        height: 160px;
        margin: 24px 10px 24px 24px;
    }
    .actcenter-canvas canvas{
        width: 160px;
        height: 160px;
        background-color: #fff3f5;
        border-radius: 50%;
    }
    .actcenter-text1{
        text-align: center;
        font-size: 14px;
        color: #1a1a1a;
        line-height: 22px;
    }
    .actcenter-total{
        font-size: 20px;
        font-weight: bold;
        color: #1a1a1a;
        line-height: 30px;
        margin-top: 30px;
    }
    .actcenter-total1 p{
        line-height: 20px;
        color: #1a1a1a;
        font-size: 14px;
        text-align: center;
    }
    .actcenter-text2{
        font-size: 14px;
        color: #666;
        line-height: 30px;
    }
    .actcenter-total1{
        background-color: #fff;
        margin: 20px;
        padding-bottom: 10px;
    }
    .actcenter-total-top{
        padding: 10px 0;
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 10px;
    }

    .actcenter-total-top-cell{
        display: inline-block;
        width:49%;
        text-align: center;
        font-size: 16px;
        color: #1a1a1a;
    }
    .actcenter-btn{
        height: 46px;
        margin: 20px;
        line-height: 46px;
        background-color: #1a9aff;
        color: #fff;
        font-size: 16px;
        text-align: center;
        border-radius: 5px;
    }
    .actcenter-btn-top{
        margin: 0 20px;
    }
    .actcenter-rule{
        margin: 20px;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
    }
    .actcenter-list-title{
        text-align: center;
        font-size: 18px;
        color: #1a1a1a;
        line-height: 40px;
        position: relative;
    }
    .actcenter-list-title-text{
        display: inline-block;
        padding: 0 20px;
        position: relative;
        background-color: #fff;
        z-index: 10;
    }
    .actcenter-list-title-line{
        position: absolute;
        top: 50%;
        width: 80%;
        left: 10%;
        border-top: 1px solid #999;
        z-index: 5;
    }
    .actcenter-slider{
        width: 100%;
        background-color: #fff;
        height: 48px;
        overflow: hidden;
        padding-left: 30px;
    }
    .anim{
        transition: all 0.5s;
        margin-top: -48px;
    }
    .actcenter-slider-ul li{
        list-style: none;
        line-height: 48px;
        height: 48px;
        font-size: 14px;
        color: #FF4C6A;
    }
    .actcenter-tips{
        background-color: #fff;
        margin: 0 20px;
        padding: 20px 0px;
        font-size: 12px;
        color: #666;
        text-align: right;
    }
    .actcenter-total-top .actcenter-shareget{
        display: inline-block;
        padding-top: 30px;
        background: url(http://img.uuuda.com/wxapp/centershare.png) no-repeat center top;
        background-size: 35px 35px;
        color: #1a9aff;
        font-size: 12px;
    }
    .actcenter-pop{
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        position: relative;
    }
    .actcenter-pop-top{
        height: 50px;
        background: url(http://img.uuuda.com/wxapp/shareget.png) no-repeat center center;
        background-size: contain;

    }
    .actcenter-pop-close{
        width: 30px;
        height: 30px;
        position: absolute;
        right: 10px;
        top: 10px;
        background: url(http://img.uuuda.com/wxapp/shareclose.png) no-repeat center center;
        background-size: contain;
    }
    .actcenter-top-p{
        font-size: 17px;
        color: #3e3e3e;
        font-weight: bold;
        text-align: center;
        line-height: 25px;
        padding: 10px 30px;
    }
    .actcenter-top-p span{
        color: #ee5b6d;
    }
    .actcenter-shareimg{
        width: 60%;
        margin-right: 60px;
    }
    .share-top .yd-popup-center{
        position: absolute;
        top: 120px;
        text-align: right;
    }

    /*遮罩样式*/


    .actcenter-mask{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        background-color: rgba(0, 0, 0, .6);
    }
    .actcenter-tip-img{
        position: absolute;
        width: 280px;
        left: 50%;
        top: 50%;
        margin-left: -140px;
        margin-top: -200px;
        padding-top: 15px;
        z-index: 100;

    }
    .actcenter-img1{
        height: 346px;
        background: url(http://img.uuuda.com/wxapp/actcenter_tip1.png) no-repeat center center;
        background-size: 100% 100%;
    }
    .actcenter-img2{
        height: 369px;
        background: url(http://img.uuuda.com/wxapp/actcenter_tip2.png) no-repeat center center;
        background-size: 100% 100%;
    }
    .actcenter-tip-btn{
        position: absolute;
        bottom: 5px;
        width: 100%;
        height: 80px;
    }


</style>
